<template>
  <s-modal title="数据配置" :visible="visible" width="1200px" :footer="null" @cancel="visible = false">
    <div style="height: 600px; width: 100%">
      <s-list-form>
        <template #less>
          <s-form-item size="list-middle" label="文本">
            <s-input v-model="query.text" placeholder="文本" />
          </s-form-item>
          <s-form-item size="list-middle" label="值">
            <s-input v-model="query.value" placeholder="值" />
          </s-form-item>
        </template>
        <template #more />
      </s-list-form>
      <div>
        <s-tool-bar>
          <template #left>
            <s-button
              v-if="authorize.insert"
              type="primary"
              icon="plus-outlined"
              @click="
                $refs.add.init((dialog) => {
                  ;(itemFormValue = {}), dialog.open()
                })
              "
            >
              新增
            </s-button>
          </template>
          <template #right>
            <s-button
              type="dashed"
              shape="circle"
              icon="redo-outlined"
              @click="$refs.table.refresh()"
            />
          </template>
        </s-tool-bar>
        <s-tree-table
          ref="table"
          bordered
          :init-param="query"
          :columns="columns"
          :scroll="{ y: 340, x: 800 }"
          url="/data/tree/item/selectListByGroupId"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a
                v-if="authorize.selectOneById"
                style="margin-right: 8px"
                @click="
                  $refs.add.init((dialog) => {
                    ;(itemFormValue = { parentId: record.id }), dialog.open()
                  })
                "
              >
                <s-icon type="plus-outlined" />添加
              </a>
              <a
                v-if="authorize.selectOneById"
                style="margin-right: 8px"
                @click="detail(record.id, $refs.detail)"
              >
                <s-icon type="eye-outlined" />查看
              </a>
              <a
                v-if="authorize.update"
                style="margin-right: 8px"
                @click="detail(record.id, $refs.update)"
              >
                <s-icon type="edit-outlined" />编辑
              </a>
              <a-popconfirm
                v-if="authorize.delete"
                title="确认删除此条数据？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteById(record.id)"
              >
                <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
              </a-popconfirm>
            </template>
          </template>
        </s-tree-table>
      </div>
      <!--      <detail ref="detail" />
      <add
        ref="add"
        @success="
          () => {
            $refs.table.refresh()
          }
        "
      />
      <update
        ref="update"
        @success="
          () => {
            $refs.table.refresh()
          }
        "
      />-->
      <s-dynamic-form-dialog
        ref="add"
        v-model="itemFormValue"
        title="添加"
        form-id="8c7dce8af61b4c058e88435488749de1"
        @save="addItem"
      >
        <template #header>
          <s-form-item label="父级节点" name="parentId">
            <s-select-tree
              v-model="itemFormValue.parentId"
              :code="query.groupId"
              allow-clear
              value-field="id"
              placeholder="父级节点"
            />
          </s-form-item>
        </template>
      </s-dynamic-form-dialog>
      <s-dynamic-form-dialog
        ref="detail"
        v-model="itemFormValue"
        title="详情"
        disabled
        form-id="8c7dce8af61b4c058e88435488749de1"
      >
        <template #header>
          <s-form-item label="父级节点" name="parentId">
            <s-select-tree
              v-model="itemFormValue.parentId"
              :code="query.groupId"
              allow-clear
              value-field="id"
              placeholder="父级节点"
            />
          </s-form-item>
        </template>
        <s-form-item label="创建人">
          <s-input v-model="itemFormValue.createByAccount" disabled />
        </s-form-item>
        <s-form-item label="创建时间">
          <s-input v-model="itemFormValue.createDate" disabled />
        </s-form-item>
        <s-form-item label="修改人">
          <s-input v-model="itemFormValue.updateByAccount" disabled />
        </s-form-item>
        <s-form-item label="修改时间">
          <s-input v-model="itemFormValue.updateDate" disabled />
        </s-form-item>
      </s-dynamic-form-dialog>
      <s-dynamic-form-dialog
        ref="update"
        v-model="itemFormValue"
        title="编辑"
        form-id="8c7dce8af61b4c058e88435488749de1"
        @save="updateItem"
      >
        <template #header>
          <s-form-item label="父级节点" name="parentId">
            <s-select-tree
              v-model="itemFormValue.parentId"
              :code="query.groupId"
              allow-clear
              value-field="id"
              placeholder="父级节点"
            />
          </s-form-item>
        </template>
      </s-dynamic-form-dialog>
    </div>
  </s-modal>
</template>

<script>
const columns = [
  {
    title: '文本',
    dataIndex: 'text',
    ellipsis: true,
    width: 200
  },
  {
    title: '值',
    dataIndex: 'value',
    ellipsis: true,
    width: 200
  },
  {
    title: '排序号',
    dataIndex: 'orderNum',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建人',
    dataIndex: 'createByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改人',
    dataIndex: 'updateByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改时间',
    dataIndex: 'updateDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'action',
    width: 300
  }
]
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
export default {
  name: 'QueryList',
  // components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      visible: false,
      columns: columns,
      itemFormValue: {}
    }
  },
  authorize: '/data/tree/item/permissionList',
  methods: {
    addItem(values, fullValue, dialog) {
      values.groupId = this.query.groupId
      this.$api
        .PUT('/data/tree/item/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      values.groupId = this.query.groupId
      this.$api
        .PUT('/data/tree/item/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    detail(id, ref) {
      const that = this
      ref.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/data/tree/item/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              that.itemFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    open(item) {
      this.query.groupId = item.groupId
      this.visible = true
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/data/tree/item/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.refresh()
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
